<template>
  <div class="middle">
        <div class="kind">
          <div class="dateKind">2020-04-04 周六</div>
          <div class="movieInfo">
            <div class="moviePic">
              <img src="" alt="">
            </div>
            <div class="movieName">
              <h1>山村怪谈</h1>
              <p class="editer">导演:<i>xxx</i></p>
              <p class="lead">主演:<i>12 3345 345 456</i></p>
            </div>
          </div>
        </div>
      </div>
</template>

<style lang="scss">
.middle{
  width: 100%;
  overflow: auto;
}
.kind{
 width: 100%;
 .dateKind{
   background-color:#ccc;
   height: 40px;
   width: 100%;
   line-height: 40px;
    text-indent:2em;
 }
 .movieInfo{
  //  height: 110px;
   width: 100%;
   display:flex;
   padding: 10px;
   .moviePic{
     width: 80px;
     height: 110px;
     img{
       border: 1px solid black;
       display: block;
       width: 100%;
       height: 100%;
     }
   }
   .movieName{
     flex:1;
     padding:5px 10px;
     h1{
       margin-bottom: 30px;
     }
   }
 }
}
</style>
